import React, {useContext, useState} from 'react';
import './header.scss'
import logo from '../img/logo_tran.png'
import {Link} from "react-router-dom";
import {Icon} from "react-ui-xmui";
import {visibleContext} from "../globel/store";

const Header = (props) => {
  const {visible, setVisible} = useContext(visibleContext)
  const handleMenuClick = (e) => {
    setVisible(!visible)
  }

  return (
    <header className={'header'}>
      <div className={'menu'} onClick={handleMenuClick}>
        <Icon name={'menu'}/>
      </div>

      <div className="logo">

        <Link to={'/'}>
          <img src={logo} alt={'XMUI'}/>
        </Link>
        <span className={'header-title'}>
            XMUI-ReactUI
        </span>


      </div>
      <div className="space"/>
      <span className={'doc'}>
          <Link to={'doc'}>文档</Link>

        </span>
    </header>
  );
};

export default Header;